/*
  学习目标：props校验   

  使用步骤
1. 导入 prop-types 包 （不用下载，脚手架自带）
2. 使用：`组件名.propTypes = {}`  来给组件的props添加校验规则对象
3. 规则的数据类型，通过 `PropTypes`  对象来指定
 

### 约束规则
1. 常见类型：array、bool、func、number、object、string
2. React元素类型：element
3. 必填项：isRequired
4. 特定结构的对象：shape   
*/
import React, { Component } from 'react';
import PropTypes from 'prop-types'
export default class App extends Component {
    render() {
        return (
            <div>
                <Hello title="aaaa" obj={{ color: "hhh", fontSize: 12 }} isShow={true} fn={() => { }} count={123} child={<Child></ Child>}> </Hello>

            </div >
        );
    }
}
function Child() {
    return <h1>孩子</h1>
}

function Hello(props) {
    return <div>
        123 {props.child}
    </div>
}

Hello.propTypes = {
    // 字符串
    title: PropTypes.string,
    // 数字
    count: PropTypes.number,
    // 布尔值
    isShow: PropTypes.bool,
    // 函数
    fn: PropTypes.func,
    // JSX
    child: PropTypes.element,
    obj: PropTypes.shape({
        color: PropTypes.string.isRequired,
        fontSize: PropTypes.number.isRequired

    })
}